<template>
  <Modal v-model="visible" width='800' class="form" :mask-closable="false" :closable="false" :title="title">
    <Form ref='pageModel' :model="config" :rules="ruleInline" label-position="right" inline :label-width='100'>
      <Row>
        <Col span="12">
          <FormItem prop="groups" label="分组">
            <span style="font-weight: bold">第 </span>
            <InputNumber v-model="config.groups" :min="1" :precision="0" style="width: 100px"></InputNumber>
            <span style="font-weight: bold"> 组</span>
          </FormItem>
        </Col>
        <Col span="12">
          <FormItem prop="tables" label="球台">
            <span style="font-weight: bold">第 </span>
            <InputNumber v-model="config.tables" :min="1" :precision="0" style="width: 100px"></InputNumber>
            <span style="font-weight: bold"> 号球台</span>
          </FormItem>
        </Col>
      </Row>
      <Row style="margin: 20px 0">
        <Col span="8">
          <Row style="text-align: center;margin-bottom: 10px;font-weight: bold">第一轮</Row>
          <Row>
            <FormItem prop="firstRoundDate" label="出发日期">
              <DatePicker v-model="config.firstRoundDate" :options="optionOne" type="date" placeholder="请选择日期" style="width: 150px"></DatePicker>
            </FormItem>
          </Row>
          <Row>
            <FormItem prop="firstRoundTime" label="出发时间">
              <TimePicker v-model="config.firstRoundTime" type="time" placeholder="请选择时间" style="width: 150px"></TimePicker>
            </FormItem>
          </Row>
        </Col>
        <Col span="8">
          <Row style="text-align: center;margin-bottom: 10px;font-weight: bold">第二轮</Row>
          <Row>
            <FormItem prop="twoRoundDate" label="出发日期">
              <DatePicker v-model="config.twoRoundDate" type="date" :options="optionTwo" placeholder="请选择日期" style="width: 150px"></DatePicker>
            </FormItem>
          </Row>
          <Row>
            <FormItem prop="twoRoundTime" label="出发时间">
              <TimePicker v-model="config.twoRoundTime" type="time" placeholder="请选择时间" style="width: 150px"></TimePicker>
            </FormItem>
          </Row>
        </Col>
        <Col span="8">
          <Row style="text-align: center;margin-bottom: 10px;font-weight: bold">第三轮</Row>
          <Row>
            <FormItem prop="thirdRoundDate" label="出发日期">
              <DatePicker v-model="config.thirdRoundDate" type="date" :options="optionThird" placeholder="请选择日期" style="width: 150px"></DatePicker>
            </FormItem>
          </Row>
          <Row>
            <FormItem prop="thirdRoundTime" label="出发时间">
              <TimePicker v-model="config.thirdRoundTime" type="time" placeholder="请选择时间" style="width: 150px"></TimePicker>
            </FormItem>
          </Row>
        </Col>
      </Row>
      <Row>
        <FormItem label="出发球员">
          <span v-for="(item,index) in memberArr" :key="index">
            <span style="background: #e4f3fc;padding: 5px 20px;border-radius: 10px;margin:10px;color:#2379d8;" >{{item.staffName}}</span>
          </span>
        </FormItem>
      </Row>
    </Form>
    <div slot="footer" style="text-align: right">
      <div>
        <Button @click="cancel"  class="m-l-sm">取消</Button>
        <Button @click="save" :loading="loading" type="primary" class="m-l-sm">保存</Button>
      </div>
    </div>
  </Modal>
</template>

<script>
  import {addTravel,checkTable} from '@/api/applets.js'
    export default {
      props:{
        visible:{
          type:Boolean,
          default:false
        },
        memberArr:{
          type:Array,
          default:[]
        },
        matchId:{
          type:String,
          default:''
        }
      },
        data() {
            return {
              config:{
                matchId:this.matchId,
                groups:1,
                tables:1,
                firstRoundDate:'',
                firstRoundTime:'',
                twoRoundDate:'',
                twoRoundTime:'',
                thirdRoundDate:'',
                thirdRoundTime:'',
                member:[]
              },
              loading:false,
              title:'配置出发行程',
              ruleInline:{
                groups: [{ required: true, message: "请选择" }],
                tables: [{ required: true, message: "请选择" }],
                firstRoundDate: [{ required: true, message: "请选择" }],
                firstRoundTime: [{ required: true, message: "请选择" }],
                twoRoundDate: [{ required: true, message: "请选择" }],
                twoRoundTime: [{ required: true, message: "请选择" }],
                thirdRoundDate: [{ required: true, message: "请选择" }],
                thirdRoundTime: [{ required: true, message: "请选择" }],
              },
              optionOne: {
                disabledDate: date => {
                  return date && date.valueOf() < Date.now() - 86400000;
                }
              },
              optionTwo: {
                disabledDate: date => {
                  let self = this;
                  return date && date.valueOf() <= self.$moment(self.config.firstRoundDate).valueOf();
                }
              },
              optionThird: {
                disabledDate: date => {
                  let self = this;
                  return date && date.valueOf() <= self.$moment(self.config.twoRoundDate).valueOf();
                }
              },
            }
        },
        watch: {},
        computed: {},
        methods: {
          cancel() {
            this.$emit('update:visible',false);
            this.$refs["pageModel"].resetFields();
          },
          save() {
            this.$refs["pageModel"].validate(valid => {
              if(valid) {
                this.config.member = this.memberArr.map(x => {
                  return {
                    enrollId: x.enrollId,
                    enrollName: x.staffName,
                  }
                });
                this.loading = true;
                checkTable({tables:this.config.tables,matchId:this.config.matchId,groups:this.config.groups})
                  .then(res => {
                      addTravel(this.config)
                        .then(res => {
                          this.loading = false;
                          this.$emit('update:visible',false);
                          this.$refs["pageModel"].resetFields();
                          this.$emit('upload')
                        })
                  })
                  .catch(err => {
                    this.loading = false;
                  })

              }
            })

          }
        }
    };
</script>
<style scoped>
  .form >>> .ivu-form .ivu-form-item-label{
    font-weight: bold !important;
  }
</style>
